<template>
  <Maptalks :mapOnLoadCB="mapOnLoadCB"></Maptalks>
</template>

<script>
import Maptalks from "@/components/common/Maptalks.component.vue"
import MapLayerConst from "@/const/MapLayerConst"

export default {
  name: "AddSmoothnessLine.component",
  components: {Maptalks},
  setup() {

    let mapOnLoadCB = (map) => {
      map.setZoom(14)

      let getSymbol = () => {
        return [
          {
            lineColor: "#34495e",
            lineWidth: 3
          },
          {
            markerType: "ellipse",
            markerWidth: 8,
            markerHeight: 8,
            markerFill: "#f00",
            markerPlacement: "vertex"
          }
        ];
      }

      let layer = new maptalks.VectorLayer(MapLayerConst.MAP_LINE_LAYER).addTo(map);

      let center = map.getCenter();

      new maptalks.Polygon([
        center.add(-0.0302, 0.0081),
        center.add(-0.0369, 0.0069),
        center.add(-0.0469, 0.0032),
        center.add(-0.0414, -0.003),
        center.add(-0.0378, -0.008),
        center.add(-0.0320, -0.009)
      ], {
        smoothness: 0.5,
        "symbol": getSymbol()
      }).addTo(layer);

      new maptalks.LineString([
        center.add(-0.0202, 0.0081),
        center.add(-0.0269, 0.0069),
        center.add(-0.0369, 0.0032),
        center.add(-0.0314, -0.003),
        center.add(-0.0278, -0.008),
        center.add(-0.0220, -0.009)
      ], {
        smoothness: 0.5,
        "symbol": getSymbol()
      }).translate(0.04, 0).addTo(layer);
    };

    return {
      mapOnLoadCB
    }
  }
}
</script>

<style scoped>

</style>
